<!DOCTYPE html>
<html lang="en">
<head>
<title>${component.name}</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Muli:300,400" type="text/css" />
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


<style type="text/css">
body {
	font-family: 'Muli', sans-serif;
}

h1, .jumbotron h1 {
	font-size: 30px;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 16px;
}

.panel {
	border-radius: 2px;
}

.container .jumbotron {
	padding: 20px;
	border-radius: 2px;
}

.jumbotron p {
	font-size: inherit;
}

.label {
	font-size: 0.9em;
	font-weight: normal;
	border-radius: 2px;
}

.panel-heading {
	background-image: none !important;
}
</style>
</head>
<body>
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script
		src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<div class="container">
		<div class="panel panel-default">
			<div class="panel-body">
				<#if breadcrumbs>
				<ol class="breadcrumb">
					<li><a href="index.html">Component library</a></li>

					<!-- categorization -->
					<li>${component.superCategory}</li> <#list component.categories as
					category>
					<li>${category}</li></#list>

					<li class="active">${component.name}</li>
				</ol>
				</#if>
				<div class="jumbotron">
					<h1>
						<img src="${component.iconSrc(32)}" alt="" /> <span>${component.name}</span>
					</h1>
					<div>${component.description}</div>
					
					<#list component.documentationLinks as link>
					<div>
						<#if link.type == 'VIDEO'>
						<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
						<#else>
						<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
						</#if>
						<a href="${link.url}">${link.title}</a>
					</div>
					</#list>
				</div>

				<div>
					<!-- component type -->
					<#if component.analyzer><span class="label label-primary">Analyzer</span></#if>
					<#if component.transformer><span class="label label-primary">Transformer</span></#if>
					<#if component.filter><span class="label label-primary">Filter</span></#if>

					<!-- execution details -->
					<#if component.queryOptimizable><span class="label label-info">Query
						optimizer</span></#if> <#if component.concurrent><span
						class="label label-info">Concurrent</span></#if> <#if
					component.distributable><span class="label label-info">Distributed
						execution possible</span></#if>

					<!-- aliases -->
					<#list component.aliases as alias> <span class="label label-info">Alias:
						${alias}</span> </#list>
				</div>
			</div>
		</div>

		<#if component.resultProducer>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>
					<span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
					<a data-toggle="collapse" href="#resultPanel"
						aria-controls="resultPanel">Result metrics <small>(${component.resultType})</small></a>
				</h2>
			</div>
			<div class="panel-body collapse in" id="resultPanel"
				aria-expanded="true">
				<ul class="list-group">
					<#list component.metrics as metric>
					<li class="list-group-item">
						<h3>
							<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
							<span class="text-info">${metric.name}</span>
						</h3> ${metric.description} <#if metric.parameterizedByInputColumn><span
						class="label label-primary">Parameterized by column</span></#if>
						<#if metric.parameterizedByString><span
						class="label label-primary">Parameterized by value</span></#if>
						<#if metric.notParameterized><span class="label label-primary">Not
							parameterized</span></#if>
					</li> </#list>
				</ul>
			</div>
		</div>
		</#if> <#if component.filter>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>
					<span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
					<a data-toggle="collapse" href="#filterOutcomesPanel"
						aria-controls="filterOutcomesPanel">Filter outcomes</a>
				</h2>
			</div>
			<div class="panel-body collapse in" id="filterOutcomesPanel"
				aria-expanded="true">
				<ul class="list-group">
					<#list component.filterOutcomes as filterOutcome>
					<li class="list-group-item">
						<h3>
							<span class="glyphicon glyphicon-share" aria-hidden="true"></span>
							<span class="text-info">${filterOutcome.name}</span>
						</h3> ${filterOutcome.description}
					</li> </#list>
				</ul>
			</div>
		</div>
		</#if>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>
					<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
					<a data-toggle="collapse" href="#configuredPropertiesPanel"
						aria-controls="configuredPropertiesPanel">Configured
						properties</a>
				</h2>
			</div>
			<div class="panel-body collapse in" id="configuredPropertiesPanel"
				aria-expanded="true">

				<ul class="list-group">
					<#list properties as property>
					<li class="list-group-item">
						<h3>
							<#if property.inputColumn> <span
								class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
							<#else> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
							</#if> ${property.name}
						</h3> ${property.description} <!-- type --> <span
						class="label label-primary">${property.type}</span> <#list
						property.enumChoices as choice> <span class="label label-default">${choice}</span>
						</#list> <#if property.mapped><span class="label label-primary">${property.mappedDescription}</span></#if>

						<!-- required/optional --> <#if property.required> <span
						class="label label-info">Required</span> <#else> <span
						class="label label-info">Optional</span> </#if>
					</li> </#list>
				</ul>

			</div>
		</div>
	</div>
</body>
</html>